<template>
	<view class="address-edit">
		<view class="address-edit-list">
			<view class="address-edit-list-item flex-center">
				<view class="address-edit-list-item-name">收货人</view>
				<input type="text" :value="name" data-name="name" @input="inputChange" />
			</view>
			<view class="address-edit-list-item flex-center">
				<view class="address-edit-list-item-name">手机号码</view>
				<input type="number" :value="phone" data-name="phone" @input="inputChange" />
			</view>
			<view class="address-edit-list-item flex-center">
				<view class="address-edit-list-item-name">所在地区</view>
				<view @tap="chooseCity">
					{{region.label}}
				</view>
			</view>
			<view class="address-edit-list-area">
				<view class="address-edit-list-area-name">详细地址</view>
				<textarea
					class="address-edit-list-area-value"
					:value="address"
					data-name="address"
					@input="inputChange" />
			</view>
		</view>
		
		<view class="btns flex-center-between">
			<button v-if="addressId" class="btn-delete" @click="deleteAddressData">删除</button>
			<button class="btn-confirm" @click="submitAddressData">保存</button>
		</view>
		
		<mpvue-city-picker
			themeColor="#007AFF"
			ref="mpvueCityPicker"
			:pickerValueDefault="cityPickerValue"
			@onCancel="onCancel"
			@onConfirm="onConfirm">
		</mpvue-city-picker>
	</view>
	
</template>

<script>
	import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue'
	export default {
		components: {
			mpvueCityPicker
		},
		data() {
			return {
				addressId: null,
				name: '',
				address: '',
				phone: '',
				// defaultStatus: false,
				cityPickerValue: [0, 0, 1],
				region:{
					label:"请选择地区",
					value:[],
					cityCode:"",
				},
				addressInfo:null
			}
		},
		onBackPress() {
			// 离开时移除地址选择
			if (this.$refs.mpvueCityPicker.showPicker) {
				this.$refs.mpvueCityPicker.pickerCancel();
				return true;
			}
		},
		onUnload() {
			// 离开时移除地址选择
			if (this.$refs.mpvueCityPicker.showPicker) {
				this.$refs.mpvueCityPicker.pickerCancel()
			}
		},
		onLoad(option) {
			this.addressId = option.id //获取地址id
			if (this.addressId) {
				this.gatAddressDetail()
			}
		},
		methods: {
			/**
			 * 获取地址详情数据
			 */
			async gatAddressDetail() {
				let res = await this.$http.request({
					method: 'post',
					url: '/api/address/detail',
					data: { id: this.addressId }
				})
				if (res.status === 1) {
					this.name = res.data.name
					this.address = res.data.address
					this.phone = res.data.phone
					this.region.label = res.data.province +'-'+ res.data.city +'-'+ res.data.town
					this.addressInfo = {
						id: this.addressId,
						name: res.data.name,
						address: res.data.address,
						phone: res.data.phone,
						default: this.defaultStatus ? 1 : 0,
						province: res.data.province,
						city: res.data.city,
						town: res.data.town,
					}
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 3000
					})
				}
			},
			/**
			 * 编辑用户地址信息
			 */
			async editAddressDetail() {
				let res = await this.$http.request({
					method: 'post',
					url: this.addressId ? '/api/address/edit' : '/api/address/add',
					data: {
						id: this.addressId,
						name: this.name,
						address: this.address,
						phone: this.phone,
						default: this.defaultStatus ? 1 : 0,
						province: this.region.label.split('-')[0],
						city: this.region.label.split('-')[1],
						town: this.region.label.split('-')[2],
					}
				})
				if (res.status === 1) {
					this.pageBack()
					uni.showToast({
						title: this.addressId ? '编辑地址成功' : '新增地址成功',
						icon: 'success'
					})
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 3000
					})
				}
			},
			/**
			 * 删除用户地址信息
			 */
			async deleteAddressData() {
				let res = await this.$http.request({
					method: 'post',
					url: '/api/address/del',
					data: { id: this.addressId }
				})
				if (res.status === 1) {
					this.pageBack()
					uni.showToast({
						title: '删除地址成功',
						icon: 'success'
					})
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 3000
					})
				}
			},
			
			/**
			 * 提交表单
			 */
			submitAddressData() {
				// 表单校验
				if (this.name === '') {
					uni.showToast({
						title: '请输入收货人姓名',
						icon: 'none'
					})
					return
				} else if (!(/^1[3456789]\d{9}$/.test(this.phone))){
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					})
					return
				} else if (this.region.label === '请选择地区'){
					uni.showToast({
						title: '请选择所在地区',
						icon: 'none'
					})
					return
				} else if (this.address === ''){
					uni.showToast({
						title: '请输入详细地址',
						icon: 'none'
					})
					return
				}
				let data = {
					id: this.addressId,
					name: this.name,
					address: this.address,
					phone: this.phone,
					default: this.defaultStatus ? 1 : 0,
					province: this.region.label.split('-')[0],
					city: this.region.label.split('-')[1],
					town: this.region.label.split('-')[2],
				}
				if(JSON.stringify(data) == JSON.stringify(this.addressInfo)){
					this.pageBack()
				} else {
					this.editAddressDetail()
				}				
			},
			
			/**
			 * 监听input值的变化
			 * @param {Object} e
			 */
			inputChange(e) {
				this[e.target.dataset.name] = e.detail.value
			},
			
			/**
			 * 打开城市选择器
			 */
			chooseCity() {
				this.$refs.mpvueCityPicker.show()
			},
			/**
			 * 取消选择
			 * @param {Object} e
			 */
			onCancel(e) {
				// console.log(e)
			},
			/**
			 * 确认选择
			 * @param {Object} e
			 */
			onConfirm(e) {
				this.region = e;
				this.cityPickerValue = e.value;
			},
			/**
			 * 返回
			 */
			pageBack() {
				uni.hideKeyboard()
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	.address-edit{
		&-list{
			padding: 0 30rpx;
			background: $uni-bg-color;
			&-item{
				height: 110rpx;
				border-bottom: 1rpx solid $uni-border-color;
				&-name{
					width: 125rpx;
					color: $uni-text-color-grey2;
					margin-right: 60rpx;
				}
			}
			&-area{
				&-name{
					margin-top: 20rpx;
					margin-right: 60rpx;
					color: $uni-text-color-grey2;
				}
				&-value{
					width: 100%;
					font-size: $uni-font-size-sm2;
				}
			}
		}
		.set-defect{
			height: 110rpx;
			padding-left: 30rpx;
		}
		.btns{
			padding: 30rpx;
			button{
				height: 95rpx;
				line-height: 95rpx;
				width: 100%;
				font-size: $uni-font-size-lg1;
				border-radius: $uni-border-radius-lg;
			}
			.btn-delete{
				margin-right: 30rpx;
			}
			.btn-confirm{
				color: $uni-text-color-inverse;
				background-color: $uni-color-theme;
			}
		}
	}
</style>
